<template>
  <div class="all">
    <div id="BasicRadarChart" style="width:400px;height:300px;"></div>
  </div>
</template>
<script>
import echarts from "echarts";
export default {
  mounted() {
    var BasicRadarChart = echarts.init(
      document.getElementById("BasicRadarChart")
    );
    var option = {
      title: {
        text: "",
        
      },
      tooltip: {},
      legend: {
        data:[]
        // data: ["预算分配（Allocated Budget）", "实际开销（Actual Spending）"]
      },
      radar: {
        // shape: 'circle',
        name: {
          textStyle: {
            color: "#fff",
            backgroundColor: "#999",
            borderRadius: 3,
            padding: [2, 2]
          }
        },
        indicator: [
          { name: "抄见率", max: 6500 },
          { name: "回收率", max: 16000 },
          { name: "及时率", max: 30000 },
          { name: "其他", max: 38000 },
          { name: "差错率", max: 52000 },
        ]
      },
      series: [
        {
          name: "预算 vs 开销（Budget vs spending）",
          type: "radar",
          radius: ["10%", "10%"],
          center: ["50%", "50%"],
          // areaStyle: {normal: {}},
          data: [
            {
              value: [4300, 10000, 28000, 35000, 50000, 19000],
              name: "预算分配（Allocated Budget）"
            },
            // {
            //   value: [5000, 14000, 28000, 31000, 42000, 21000],
            //   name: "实际开销（Actual Spending）"
            // }
          ]
        }
      ]
    };
    BasicRadarChart.setOption(option, true);
  }
};
</script>
<style lang="scss" scoped>
.all{
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #fff;
}
</style>